Selecting a <div> Containing an Image Using :has() in CSS
The :has() pseudo-class in CSS allows you to select elements that contain specific descendants. You can use it to target a <div> that contains an <img> element and apply custom styles.
:has()selects elements based on their descendants or children.You can combine
:has()with other selectors for more precise targeting.This pseudo-class is particularly useful for styling parent elements depending on their child elements.
In this example, only the <div> that contains an <img> element receives the border and background styles, while other <div> elements remain unchanged.
Use
:has()to style containers based on their child elements dynamically.Check browser compatibility, as older browsers may not fully support
:has().Combine with transitions for smooth visual effects when elements change state.
Avoid overusing
:has()for performance-critical layouts, as it may increase rendering complexity.